<template>
	<view class="count">
		<view class="u-flex u-row-center">
			<u-image width="80%" mode="widthFix" :src="carTypeArr[carIndex].img"></u-image>
		</view>
		<view class="white">
			<view class="u-p-20">
				<view class="u-m-t-30">载重（kg）</view>
				<view class="u-border-bottom u-m-20">{{carTypeArr[carIndex].load}}</view>
			</view>
			<view class="u-p-20">
				<view class="u-m-t-30">长宽高（m）</view>
				<view class="u-border-bottom u-m-20">{{carTypeArr[carIndex].three_high}}</view>
			</view>
			<view class="u-p-20">
				<view class="u-m-t-30">载货体积（m³）</view>
				<view class="u-border-bottom u-m-20">{{carTypeArr[carIndex].volume}}</view>
			</view>
		</view>
		<view class="white u-m-t-20">
			<view class="u-p-20">基本路费</view>
		</view>
		<text class="u-p-20">起步价（公里）</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carIndex:0,
				carTypeArr:[
					{
						img:require('@/static/image/index/car1-2.png'),
						title:'三轮车',
						load:'500公斤',
						three_high:'2x1.4x0.45米',
						volume:'1.4方'
					},{
						img:require('@/static/image/index/car2-1.png'),
						title:'小面包车',
						load:'500公斤',
						three_high:'1.8x1.3x1.1米',
						volume:'2.6方'
					},{
						img:require('@/static/image/index/car2-2.png'),
						title:'中面包车',
						load:'1吨',
						three_high:'2.7x1.4x1.2米',
						volume:'4.5方'
					},{
						img:require('@/static/image/index/car3-1.png'),
						title:'小货车',
						load:'1.5吨',
						three_high:'2.7x1.5x1.7米',
						volume:'6.9方'
					},{
						img:require('@/static/image/index/car3-2.png'),
						title:'中货车',
						load:'1.8吨',
						three_high:'4.2x1.8x1.8米',
						volume:'13.6方'
					},
				]
			}
		},
		onLoad({index}){
			this.carIndex=index
		},
	}
</script>

<style>
	.white{
		background-color: #FFFFFF;
	}
</style>
